<template>
	<view class="pt-26 pb-1info.icon4 flex flex-dir-col flex-center">
		<w-icon v-if="info.icon" :name="info.icon" size="56"></w-icon>
		<text v-if="info.text" class='mt-4' :class="'font-color-'+info.tipsColor">{{info.text&&handleLang(info.text)}}</text>
		<view v-if="info.tips" class="flex  mt-12" :class="'font-color-'+info.tipsColor">
			<!-- <text class="font-size-12" v-if="info.tips!='updatetime'">{{info.tips&&handleLang(info.tips)}}</text> -->
			<u-count-down class='ml-4' @finish='finish' @change="onChanges" v-if="info.tips!='updatetime'&&order.surplus_time_text!=0&&(order.order_type<=2||order.order_type==10 || order.order_type==19)&&order.order_status==1" :time="order.surplus_time_text* 1000" format="HH:mm:ss" autoStart millisecond>
				<view class="time flex flex-ai-center font-color-price">
					<view class="time__item"> {{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}} </view>
					<view class="font-color-textPrimary font-size-14 mlr-4">小时</view>
					<view class="time__item">{{ timeData.minutes>=10?timeData.minutes:'0' + timeData.minutes }}</view>
					<view class="font-color-textPrimary font-size-14 mlr-4">分</view>
					<view class="time__item">{{ timeData.seconds>=10?timeData.seconds:'0' + timeData.seconds }}</view>
					<view class="font-color-textPrimary font-size-14 mlr-4">秒</view>
				</view>
			</u-count-down>		
			<text class="font-size-12" v-if="info.tips=='updatetime'">{{order.updatetime|formatDate}}</text>
			<text class="font-size-12" v-if="info.detailTips"> {{ info.detailTips }} </text>
		</view>
	</view>
</template>

<script>
	import OrderStatusMap from './orderStatusMap.js'
	export default {
		props: {
			order: {
				type: Object,
				default () {
					return {
						product: {}
					}
				}
			}
		},
		data(){
			return {
				timeData:{},
			}
		},
		computed: {
			info() {
				return OrderStatusMap[this.order.order_type][this.order.order_status]
			}
		},
		methods: {
			finish() {
				this.$emit('finish')
			},
			onChanges(e) {
				this.timeData = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.font-color-warning {
		/deep/ .u-count-down__text {
			@extend .font-color-warning,
			.font-size-12;
			line-height: normal;
		}
	}
	.time {
	    &__item {
	         width: 48rpx;
	         height: 48rpx;
	         background: #FFF4C2;
	         border-radius: 8rpx 8rpx 8rpx 8rpx;
	         opacity: 1;
	         border: 1rpx solid #F57C0C;
			 line-height: 48rpx;
			 text-align: center;
			 color: #784616;
	     }
	}
</style>
